import React, { useEffect, useState } from "react";
// import store from "../store/";
import { useSelector, useDispatch } from "react-redux";

const ReduxTest = () => {
  //   useEffect(() => {
  //     store.subscribe(() => {
  //       setstate(store.getState)
  //     })
  //   }, [])

  //   const [state, setstate] = useState(store.getState);
  // return (
  //   <div>
  //     {state}
  //     <div>
  //       <button onClick={() => store.dispatch({ type: "add" })}>add it </button>
  //       <button onClick={() => store.dispatch({ type: "minus" })}>minus it </button>
  //     </div>
  //   </div>
  // );
  const counter = useSelector((state) => state);
  const dispatch = useDispatch();

  const addCountAsync = () => {
    dispatch(fetchDate('add'))
  };
  const miunsCountAsync = () => {
    dispatch(fetchDate('minus'))
  }
  const fetchDate = (type) => {
    return function(dispatch){
      setTimeout(() => {
        dispatch({type})
      },1000)
    }
  }
  return (
    <div>
      {counter}
      <div>
        <button onClick={() => addCountAsync()}>add it </button>
        <button onClick={() => miunsCountAsync()}>minus it</button>
      </div>
    </div>
  );
  // return (
  //   <div>
  //     {counter}
  //     <div>
  //       <button onClick={() => dispatch({ type: "add" })}>add it </button>
  //       <button onClick={() => dispatch({ type: "minus" })}>minus it </button>
  //     </div>
  //   </div>
  // );
};
export default ReduxTest;
